<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Demo</title>

</head>

<body>

<p id="w1"></p>

<div id="main" style="width: 600px;height:400px;"></div>
</body>
<script src="jquery-1.12.4.js"></script>
<script src="echarts.js"></script>
<script>
    var myChart = echarts.init(document.getElementById('main'));
    var option = {
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: [1, 1, 1, 1, 1, 1, 1],
            type: 'line'
        }]
    };
    // 把定义好的option 赋值给 ECharts对象
    myChart.setOption(option, true);

    var webSocket = new WebSocket(
        //"ws://10.5.20.42:2424/websocket"
        "ws://192.168.16.20:8989/ws/test"
    );

    webSocket.onerror = function (event) {
        console.log(event);
        console.log('onerror')
    };


    //TODO 应该是手动调，不应该通过ajax调
    var data2 = [];
    webSocket.onopen = function (event) {
        /*$(function () {
            $.ajax({
                url: '/websocketMessage/sendData',
                success: function (data) {
                    console.log("data.data ---> " + data.data);
                    data2 = data.data;
                }
            });
        });*/
    };

    var flag2 = false;
    webSocket.onmessage = function (event) {
        console.log("event ---> " + event.data);
        flag2 = event.data;
        //option.series[0].data = data2;
        //myChart.setOption(option, true);
        console.log((flag2 == "true"));
        if(flag2 == "true") {
            $(function () {
                $.ajax({
                    url: '/sendData',
                    success: function (data) {
                        console.log("data.data ---> " + data.data);
                        data2 = data.data;

                        option.series[0].data = data2;
                        myChart.setOption(option, true);
                    }
                });
            });
            // option.series[0].data = data2;
            // myChart.setOption(option, true);
        }
    }

</script>

</html>